/*
 * @Descripttion: 工具函数
 * @version: V1.0.0.1
 * @Author: zhaozhenzhuo
 * @Date: 2025-01-10 15:54:23
 * @LastEditors: zhaozhenzhuo
 * @LastEditTime: 2025-02-12 14:10:47
 */
import { MultiPlayerOptionsRequireOne } from './types';
import { WATERMARK_CONFIG } from './config';

/**
 * @desc 添加样式类
 * @param {MultiPlayerOptionsRequireOne} options 实例化时传入的参数
 */
export const validateParams = (options: MultiPlayerOptionsRequireOne): void => {
  if (!options.type) {
    throw new Error('请传入播放类型type');
  }
  if (!options.id && !options.el) {
    throw new Error('请传入容器id/el');
  }
  if (options.id && options.el) {
    throw new Error('不能同时传入id和el');
  }
  if (options.id && !document.querySelector(`#${options.id}`)) {
    throw new Error('不存在容器DOM');
  }
  if (!options.urlList || !options.urlList.length) {
    throw new Error('请传入视频源urlList');
  }
  if (!options.width && !options.height) {
    throw new Error('请传入width或height');
  }
};

/**
 * @desc 判断页面上是否存在满足css选择器的DOM
 * @param {Document | Element} el 容器DOM，在该DOM内查找
 * @param {string} selector css选择器
 * @return {HTMLElement | null} 表明是否存在满足要求的DOM，没有返回null，有返回DOM
 */
export const hasDomByCSSSelector = (
  el: Document | Element,
  selector: string
): HTMLElement | null => {
  try {
    const _dom: HTMLElement | null = el.querySelector(selector);
    if (_dom) {
      return _dom;
    }
    return null;
  } catch {
    return null;
  }
};

/**
 * @desc 创建DOM
 * @param {string} domType 创建的dom类型，例如div
 * @param {object} domAttr dom属性 例如{ 'class': 'a', 'id': 'b' }
 * @param {object} domStyle dom样式 例如{ 'backgroundColor': 'red', 'border': '1px solid green' }
 * @return {HTMLElement | null} 创建成功的DOM，创建失败返回null
 */
export const createDom = (
  domType: string,
  domAttr?: Record<string, string>,
  domStyle?: Partial<Pick<CSSStyleDeclaration, keyof CSSStyleDeclaration>>
): HTMLElement | null => {
  try {
    const _dom = document.createElement(domType);
    if (domAttr) {
      Object.keys(domAttr).forEach((attr) => {
        _dom.setAttribute(attr, domAttr[attr]);
      });
    }
    if (domStyle) {
      Object.assign(_dom.style, domStyle);
    }
    return _dom;
  } catch {
    return null;
  }
};

/**
 * @desc 给DOM设置样式
 * @param {HTMLElement} dom 想要设置样式的DOM
 * @param {object} domStyle dom样式 例如{ 'backgroundColor': 'red', 'border': '1px solid green' }
 * @return {HTMLElement} 返回的DOM
 */
export const setDOMStyle = (
  dom: HTMLElement,
  domStyle: Partial<Pick<CSSStyleDeclaration, keyof CSSStyleDeclaration>>
): HTMLElement | null => {
  try {
    if (dom && domStyle) {
      Object.assign(dom.style, domStyle);
    }
    return dom;
  } catch {
    return dom;
  }
};

/**
 * @desc 添加水印
 * @param {HTMLElement} dom 播放器所挂载的DOM
 * @param {string} waterMarkText 水印文字
 */
export const setWaterMark = (dom: HTMLElement, waterMarkText: string): void => {
  if (!dom || !waterMarkText) {
    return;
  }
  // 添加水印
  const watermark = document.createElement('div');
  // 设置水印样式
  watermark.style.position = 'absolute';
  watermark.style.width = '100%';
  watermark.style.height = '100%';
  watermark.style.color = WATERMARK_CONFIG.FONT_COLOR;
  watermark.style.fontFamily = WATERMARK_CONFIG.FONT_FAMILY;
  watermark.style.fontSize = WATERMARK_CONFIG.FONT_SIZE;
  watermark.style.top = '0';
  watermark.style.overflow = 'hidden';
  watermark.style.pointerEvents = 'none';
  watermark.style.whiteSpace = 'nowrap';

  watermark.className = 'watermark';
  for (let i = 0; i < 100; i++) {
    watermark.innerHTML += `<div>${waterMarkText}</div>`;
  }
  // 将元素均匀分布
  const divList = watermark.querySelectorAll('div');
  let row = 0;
  let column = 0;
  const spacing = WATERMARK_CONFIG.SPACING; // 根据需要调整间距
  divList.forEach((item) => {
    item.style.position = 'absolute';
    item.style.left = `${column * spacing}px`;
    item.style.top = `${row * spacing}px`;
    item.style.transform = `rotate(${WATERMARK_CONFIG.ROTATE_DEGREE}deg)`; // 旋转30度
    column += 1;
    if (column >= 10) {
      // 假设每行最多10个元素
      column = 0;
      row += 1;
    }
  });

  dom.appendChild(watermark);
};
